<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻播报</title>
    <style>
            body {
                padding: 15px;
            }


.container{
  flex: 1;
  flex-direction: column;
}
.item-container {
  margin-left: 32px;
  margin-right:32px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  background-color: #fff;
  border-radius: 32px;
  flex-direction: column;
}
  .btn {
    background-color: #0faeff;
    color: #ffffff;
    width:80px;
    height: 50px;
    font-size: 10px;
    border-radius:15px;
  }


    </style>
</head>

<body>

<p id="newsContent">中国国家主席习近平今天发表重要讲话...</p>
<p id="test">测试...</p>

<div class="container">
    <div class="item-container">
        <input class="btn" type="button" value="Speak" onclick="Speak"/>
    </div>
    <div class="item-container">
        <input class="btn" type="button" value="textToAudioFile" onclick="textToAudioFile"/>
    </div>
    <div class="item-container">
        <input class="btn" type="button" value="isLanguageAvailable" onclick="isLanguageAvailable"/>
    </div>
    <div class="item-container">
        <input class="btn" type="button" value="stop " onclick="stop "/>
    </div>
    <div class="item-container">
        <input class="btn" type="button" value="isSpeaking " onclick="isSpeaking "/>
    </div>
</div>

<script>
    import texttoaudio from '@service.texttoaudio'
    import prompt from '@system.prompt';
    export default {
                    document.getElementById('test').textContent = "33333";

        data: {
            componentName: 'texttoaudio',
            isRefreshing: false,
            enableRefresh: true
        },
        onInit() {
            this.$page.setTitleBar({ text: 'texttoaudio' })
            texttoaudio.onttsstatechange = function (data) {
                switch (data.state) {
                    case 'onStart':
                    document.getElementById('test').textContent = "特特人";

                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') started.');
                        break;
                    case 'onError':
                    document.getElementById('test').textContent = "特特人退热贴";

                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') failed.');
                        break;
                    case 'onStop':
                    document.getElementById('test').textContent = "特任特特儿童";

                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') stopped.');
                        break;
                    case 'onDone':
                    document.getElementById('test').textContent = "tertiary额其味无穷";

                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') done.');
                        break;
                    default:
                        break;
                }
            }
        },
        Speak() {
                    document.getElementById('test').textContent = "测试科技大厦打开撒扣篮大赛";

            texttoaudio.speak({
                lang: 'en_US',
                //content: 'I like chocolate.',
                content: "后来打算恐龙当家啊上课了达萨罗看德萨卡斯",
                pitch: 1.0,
                rate: 1.0,
                success: function (data) {
                    console.log('speak.success --> utteranceId: ' + data.utteranceId);
                    document.getElementById('newsContent').textContent = data.utteranceId;
                    document.getElementById('newsContent').textContent = "放得开是否会";
                },
                fail: function (errorMessage, errorCode) {
                    console.log('speak.fail --> errorMessage: ' + errorMessage + ", errorCode: " + errorCode);


        document.getElementById('newsContent').textContent = errorCode;
        document.getElementById('newsContent').textContent = "失败";
                }
            });
        },
        textToAudioFile() {
            texttoaudio.textToAudioFile({
                lang: 'en_US',
                content: 'I am running by the lake.',
                pitch: 1.0,
                rate: 1.0,
                success: function (data) {
                    // Utterance is successfully added to TTS engine's queue. Make sure that onttsstatechange is
                    // triggered with 'onDone' to start using the generated audio file.
                    console.log('success --> utteranceId: ' + data.utteranceId + ", filePath: " + data.filePath);
                    prompt.showToast({
                        message:  'utteranceId:'+ data.utteranceId+'  ,filePath: '+data.filePath,
                        duration: 2000,
                        gravity: 'bottom'
                    });
                },
                fail: function (errorMessage, errorCode) {
                    console.log('fail --> errorMessage: ' + errorMessage + ", errorCode: " + errorCode);
                }
            });
        },
        isLanguageAvailable() {
            texttoaudio.isLanguageAvailable({
                lang: 'tr',
                success: function (data) {
                    console.log('success --> isAvailable: ' + data.isAvailable);
                    prompt.showToast({
                        message: data.isAvailable,
                        duration: 2000,
                        gravity: 'bottom'
                    });
                },
                fail: function (errorMessage, errorCode) {
                    console.log('fail --> errorMessage: ' + errorMessage + ', errorCode: ' + errorCode);
                }
            });
        },
        onttsstatechange() {
            texttoaudio.onttsstatechange = function (data) {
                switch (data.state) {
                    case 'onStart':
                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') started.');
                        break;
                    case 'onError':
                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') failed.');
                        break;
                    case 'onStop':
                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') stopped.');
                        break;
                    case 'onDone':
                        console.log('onttsstatechange --> Synthesis(' + data.utteranceId + ') done.');
                        break;
                    default:
                        break;
                }
            }
        },
        stop() {
            var value = texttoaudio.stop();
            if (value === 0) {
                console.log('stop --> success');
            } else {
                console.log('stop --> fail');
            }
        },
        isSpeaking() {
            var result = texttoaudio.isSpeaking();
            console.log('isSpeaking --> ' + result);
        }
    }
</script>
</body>
</html>
